<div class="row totalArea">
  <div class="totalIncidents">
    <div class="headLine">
      <div class="headLine_l">
        <i class="iconfont icon-baobiaotongji" style="color: white;font-size: 0.3rem;"></i>
        <div class="headLine_title">{{'Data_Visualization.Overall.totalIncidents' | translate}}</div>
      </div>
    </div>
    <div class="head_middle">
      {{data.TotalIncedents.total||" "}}
    </div>
    <div class="head_bottom">
      <div>{{'Data_Visualization.Overall.Monthly_Updates' | translate}} ({{data.TotalIncedents.monthlyUpdate}})</div>
      <div>{{'Data_Visualization.Overall.Last_Updated' | translate}}: {{data.TotalIncedents.lastUpdated}}</div>
    </div>
  </div>
  <div class="totalEvents">
    <div class="headLine">
      <div class="headLine_l">
        <i class="iconfont icon-baobiaotongji" style="color: white;font-size: 0.3rem;"></i>
        <div class="headLine_title">{{'Data_Visualization.Overall.totalEvents' | translate}}</div>
      </div>
    </div>
    <div class="head_middle">
      {{data.TotalEvents.total||" "}}
    </div>
    <div class="head_bottom">
      <div>{{'Data_Visualization.Overall.Monthly_Updates' | translate}} ({{data.TotalEvents.monthlyUpdate}})</div>
      <div>{{'Data_Visualization.Overall.Last_Updated' | translate}}: {{data.TotalEvents.lastUpdated}}</div>
    </div>
  </div>
  <div class="mostOccuredIncidents">
    <div class="headLine">
      <div class="headLine_l">
        <i class="iconfont icon-baobiaotongji" style="color: white;font-size: 0.3rem;"></i>
        <div class="headLine_title">{{'Data_Visualization.Overall.mostOccuredIncidents' | translate}}</div>
      </div>
    </div>
    <div class="head_middle">
      {{data.period.startTime}}
      <span style="font-size: 0.2rem">{{data.period.startUnit}}</span> -
      {{data.period.endTime}}
      <span style="font-size: 0.2rem">{{data.period.endUnit}}</span>
    </div>
    <div class="head_bottom">
      <div>{{'Data_Visualization.Overall.Monthly_Updates' | translate}} ({{data.period.monthlyUpdate}})</div>
      <div>{{'Data_Visualization.Overall.Last_Updated' | translate}}: {{data.period.lastUpdated}}</div>
    </div>
  </div>
  <div class="weather">
    <div class="headLine">
      <div class="headLine_l">
        <!-- <i class="iconfont icon-tianqi-yin" style="color: white;font-size: 0.3rem;"></i> -->
        <img *ngIf="data.weather.ico" [src]="'http://openweathermap.org/img/w/' + data.weather.ico + '.png'" />
        <div class="headLine_title">{{'Data_Visualization.Overall.weather' | translate}}</div>
      </div>
      <div class="headLine_r">{{data.weather.area}}</div>
    </div>
    <div class="head_middle">
      {{data.weather.deg}}°
    </div>
    <div class="head_bottom">
      <div>{{'Data_Visualization.Overall.Monthly_Updates' | translate}} ({{data.weather.monthlyUpdate}})</div>
      <div>{{'Data_Visualization.Overall.Last_Updated' | translate}}: {{data.weather.lastUpdated}}</div>
    </div>
  </div>
</div>